<template>
    <view class="page-community-index page-collect-list">
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="search-sticky">
				<u-row gutter="0">
					<u-col span="3" v-for="(item,index) in tab.list" :key="index">
						<view class="text-center">
                            <view class="inline-block" :class="tab.current == index ? 'current' : ''" @click="changeTab(index)">
                                <text class="name">{{ item.name }}</text>
                            </view>
                        </view> 
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="p-4" v-if="tab.list[tab.current].records.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view> 
		<view class="album">
            <view class="item" v-for="(item, index) in tab.list[tab.current].records" :key="index">
                <view class="content">
                    <view class="title" v-if="item.title" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">{{ item.title }}</view>
                    <view v-if="item.articlesType == '2'" class="book" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                        <view class="flex-block mb-2">
                            <u-image width="240rpx" height="280rpx" :src="proxy.$util.getFullImage(item.coverImageUrl)"></u-image>
                            <view class="ul-li">
                                <view class="li">书名：{{ item.bookName }}</view>
                                <view class="li">作者：{{ item.bookAuthor }}</view>
                                <view class="li">标签：{{ item.tags }}</view>
                                <view class="li">推荐理由：{{ item.recommendationReason }}</view>
                                <!-- <view class="li" v-for="(tag,i) in item.tagList" :key="i">{{ tag }}</view> -->
                            </view>
                        </view>
                        <view class="text">
                            <view v-html="proxy.$util.resetHtml(item.content)"></view>
                        </view>
                    </view>
                    <view v-else class="text" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                        <view v-html="proxy.$util.resetHtml(item.content)"></view>
                    </view>
                    <template v-if="item.articlesType == '1'">
                        <view class="imgs" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                            <image-layout ref="refImageLayout" :imgs="articleStore.getImageList(item.coverImageUrl)" />
                        </view>
                        <view @click="proxy.$util.gotoPage('/packageB/activity/detail', { id: item.articlesActivitesDto.id })">
                            <u-tag class="activity-tag"
                                :class="articleStore.getActivitiesName(item.articlesActivitesDto, 'isExpire') ? 'tag-grey' : 'tag-cyan'"
                                shape="circle" :text="articleStore.getActivitiesName(item.articlesActivitesDto, 'name')"></u-tag>
                        </view>
                    </template>
                    <view class="comment">
                        <view class="time">{{ item.createTime }}</view>
                        <view class="btns">
                            <u-button class="btn-red" shape="circle" size="mini" @click.stop="handleDelete(item)">删除</u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import ImageLayout from '@/components/ImageLayout/index.vue';
import {onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
import { useOptionData } from '@/stores/optionData';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const optionDataStore = useOptionData();
import { useArticleStore } from '@/stores/article';
const articleStore = useArticleStore();
let tab = reactive({
	current: 0,
	list:[
		{id:null, name: '全部', records: [], current: 1, size: 10, total:0},
		{id:1, name: '笔记', records: [], current: 1, size: 10, total:0},
		{id:2, name: '推书', records: [], current: 1, size: 10, total:0},
		{id:0, name: '长文', records: [], current: 1, size: 10, total:0},
	]
});

const changeTab = (i) => {
	tab.current = i;
    if(tab.list[tab.current].records.length == 0){
        getList('refresh');
    }
}
const getList = (type) => {
    let obj = tab.list[tab.current];
      if(type == 'refresh'){  
        obj.current = 1;
        obj.records = [];
      }else{
        if(obj.total > obj.records.length){
          obj.current ++;        
        }else{
          uni.showToast({title:'没有更多了',icon: 'none'});
          return;
        }
      };
      let params = {
        current: obj.current,
        size: obj.size,
        articlesType: obj.id,
		userId: appStore.userInfo.userId,
        status: 1,
      };
      proxy.$http('get', '/admin/articles/page', proxy.$util.getParam(params) ,(data,msg) => {
        obj.records = obj.records.concat(data.records);
        obj.total = data.total;
      },msg => {

      })
};
const handleDelete = (item) => {
    uni.showModal({
        title: '提示',
        content: '是否要删除该文章',
        success: res => {
            if(res.confirm){
                proxy.$http('delete', '/admin/articles', [item.id], (data,msg) => {
                    getList('refresh');
                })
            }
        },
        
    })
}
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onShow(() => {
	getList('refresh');
})
</script>